<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  <title>低配版宠物小精灵</title>
  <link rel="stylesheet" href="./css/main.css">
  <!-- 全局URL -->
  <script src="./js/config.js"></script>
  <!-- 请求封装 -->
  <script src="./js/fetch.js"></script>
  <!-- 工具函数 -->
  <script src="./js/tools.js"></script>
  <script src="./js/jquery.min.js"></script>
  <!--hls.js解决m3u8播放问题-->
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
  <div id="master" class="master">
    <div class='mapBox'>
      <div id='map' class="map">
        <!-- 电影院 -->
        <div id="cinema" class="cinemaBg">
          <div class="cinema">
            <div class="cinemaTitle">axiaopeng CINEMA</div>
            <video id="video" class="video" controls="controls" style="width: 50vw;height: 50vh;" ></video>
            <div class="VDoption">
              <div class="sndhw"  onclick="sndhw(1)">少女的悔悟</div>
              <div class="sndhw" onclick="sndhw(2)">手机的秘密</div>       
              <div class="sndhw" onclick="sndhw(3)">七夕</div>       
            </div>
            <div class="outTop">触碰白色区域可离开电影院</div>
            <div class="outRight">触碰白色区域可离开电影院</div>
            <div class="outBottom">触碰白色区域可离开电影院</div>
            <div class="outLeft">触碰白色区域可离开电影院</div>
          </div>
        </div>
      </div> 
    </div>
    <div  class="extension">
      <h3 style="display: flex;justify-content: space-between;"><div>多功能模态信息框</div> <div>当前区域:光明区<span id="coordinate"></span></div></h3>
      <div id="rightBox">
        <div class="ex_info">
          <div>当前个人信息</div>
          <div class="ex_info_item"> <span class="taCenter">展示头像</span>  <img class="ex_avator" src="./roleImg/1.png" alt=""> </div>
          <div class="ex_info_item"> <span class="taCenter">昵称  </span> <span class="ex_username">卓泽鹏</span> </div>
          <div class="ex_info_item"> <span class="taCenter">微信号</span> <span class="wechat">1054521773</span> </div>
          <div class="ex_info_item"> <span class="taCenter">手机号</span> <span class="wechat">13415614725</span> </div>
        </div>
      </div>
      <div class="functions">
        
      </div>

      <h3><div>扩展区域-暂定计划</div></h3>
      <h5>1.显示自己的角色信息资料</h5>
      <h5>2.点击他人显示的他人角色信息资料</h5>
      <h5>3.电影院搜索引擎及搜索展示</h5>
      <h5>4.等待灵感中...</h5>
    </div>
  </div>

  <div id="saveProg" class="exit">
    退出保存
  </div>
  <div id="chatInputBox" class="chatInputBox">
    <textarea id='inputTextarea' class="inputTextarea" rows="8" ></textarea>
    <button id="sendMsg" class="sendMsg">发送(shift+enter)</button>
    <div class="chatInputTip">按ESC取消对话框</div>
  </div>
  <div id="loading" class="loading">
    <div class="loadingCss">
      <div class="loadingCtx">加载中...</div>
    </div>
  </div>
  <!-- 请求中动画 -->
  <div id="reqLoad" class="reqLoad">
    <div class="sk-cube-grid">
      <div class="sk-cube sk-cube1"></div>
      <div class="sk-cube sk-cube2"></div>
      <div class="sk-cube sk-cube3"></div>
      <div class="sk-cube sk-cube4"></div>
      <div class="sk-cube sk-cube5"></div>
      <div class="sk-cube sk-cube6"></div>
      <div class="sk-cube sk-cube7"></div>
      <div class="sk-cube sk-cube8"></div>
      <div class="sk-cube sk-cube9"></div>
    </div>
    <div class="font">正在加载中</div>
  </div>
<script src="./js/socket.io.js"></script>
<script src="./js/main.js"></script>
<!-- 移动端js文件 -->
<script src="./js/phone.js"></script>
<script>
   var video = document.getElementById('video'); 
  // 创建视频播放对象
  function sndhw(vdInd){
    if(vdInd===1){
      var videoSrc = 'https://t11.cdn2020.com:12336/video/m3u8/2021/10/01/520a11da/index.m3u8';
    }else if(vdInd===2){
      var videoSrc = 'https://t11.cdn2020.com:12336/video/m3u8/2021/09/04/d662110b/index.m3u8';
    }else if(vdInd ===3){
      var videoSrc = 'https://t11.cdn2020.com:12336/video/m3u8/2021/08/14/50b13da7/index.m3u8';
    }
    if (Hls.isSupported()) {
      var hls = new Hls();
      hls.loadSource(videoSrc);
      hls.attachMedia(video);
    }
  }
</script>
</body>
</html>